<template>
    <div class="container">
        <p class="title">数据总览</p>
        <!-- 顶部的三个数据 -->
        <div class="top">
            <!-- 咨询人数 -->
            <div class="information">
                <p style="margin-left:23px;font-size:15px">咨询人数</p>
                <span style="font-size:30px;">{{ total }}<span style="font-size:12px;">今日</span></span>
                <p class="total">共{{ totalVisit }}</p>
            </div>
            <!-- 访问人数 -->
            <div class="visit">
                <p style="margin-left:23px;font-size:15px">访问人数</p>
                <span style="font-size:30px;">{{ visit }}<span style="font-size:12px;">今日</span></span>
                <p class="total">共{{ totalVisit }}</p>
            </div>
            <!-- 咨询时长 -->
            <div class="duration">
                <p style="margin-left:85px;font-size:15px;width:130px">咨询时长（小时）</p>
                <span style="font-size:30px;">{{ duration }}<span style="font-size:12px;">今日</span></span>
                <p class="total" style="margin-left:19px;">共{{ totalDuration }}小时</p>
            </div>
        </div>
        <!-- 中间的图表 -->
        <div class="middle">
            <!-- 左侧柱状图 -->
            <div class="left">
                <header>
                    <p class="title">咨询人数</p>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="value1" type="daterange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" @change="handleChange" />
                        </div>
                    </div>
                </header>
                <div v-if="dataBar === ''" ref="leftBarRef" class="left-bar"></div>
                <!-- 如果选择的时间没有数据，就显示这个组件 -->
                <el-empty v-else description="暂无访问数据" />
            </div>
            <!-- 右侧饼图  -->
            <div class="right">
                <header>
                    <p class="title" style="transform:translateX(92px)">男女比例</p>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="value2" type="daterange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" style="transform:translateX(-46px)"
                                @change="handleChange" />
                        </div>
                    </div>
                </header>
                <div class="right-pie">
                    <homePie :dataPie="dataPie"></homePie>
                </div>
            </div>
        </div>
        <!-- 底部表格 -->
        <div class="bottom">
            <div class="flex gap-4 items-center" style="margin-bottom: 20px;">
                <span>月份</span>
                <el-select v-model="SelectVal1" placeholder="1" size="small" style="width: 60px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span>~</span>
                <el-select v-model="SelectVal2" placeholder="1" size="small" style="width: 60px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span>学院</span>
                <el-select v-model="SelectVal3" placeholder="1" size="small" style="width: 150px">
                    <el-option v-for="item in schoolInfo" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span>学历</span>
                <el-select v-model="SelectVal4" placeholder="1" size="small" style="width: 100px">
                    <el-option v-for="item in XliInfo" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
                <div class="export-button" style="margin-left: auto;">
                    <el-button type="primary">
                        <a href="../../public/牙牙乐-排期表.xlsx">导出</a>
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="月份" width="180" />
                <el-table-column prop="name" label="学院" width="180" />
                <el-table-column prop="address" label="本科/研究生" />
                <el-table-column prop="information" label="咨询人数" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import homePie from '@/components/Home/homePie.vue';
import { getIndexEcharts, getIndexBar, getIndexPie } from '@/api/Home/request';
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
// 头部数据总览的数据
const total = ref('');
const totalDuration = ref('');
const totalVisit = ref('');
const duration = ref('');
const number = ref('');
const visit = ref('');

// 顶部数据总览的请求
getIndexEcharts().then(res => {
    if (res.code === 200) {
        total.value = res.data.total;
        totalDuration.value = res.data.totalDuration;
        totalVisit.value = res.data.totalVisit;
        duration.value = res.data.duration;
        number.value = res.data.number;
        visit.value = res.data.visit;
    }
});

// 时间选择器需要的东西
const value1 = ref([new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()]); // 默认前7天到今天
const value2 = ref([new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()]); // 默认前7天到今天

// 自定义格式化时间函数
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
// 存放柱状图的数据
const dataBar = ref();
// 存放饼图的数据
const dataPie = ref(
    { value: 100, name: '男' },
    { value: 150, name: '女' }
);

// 日期选择框值改变时触发
function handleChange(value) {
    const startDate = value[0];
    const endDate = value[1];

    // 格式化日期为 'YYYY-MM-DD' 格式
    const startTime = formatDate(startDate);
    const endTime = formatDate(endDate);

    // 调用 getIndexBar 并传递格式化后的日期
    getIndexBar(startTime, endTime).then(res => {
        // console.log(res, '柱状图请求'); //一直返回空;
        dataBar.value = res.data;
        // console.log(dataBar.value.length, '柱状图数据');

        // 在这里处理返回的数据
    });

    // 饼图的数据
    getIndexPie(startTime, endTime).then(res => {
        if (res.code === 200) {
            dataPie.value = res.data; // 正确赋值
            // console.log(dataPie.value, '饼图数据');
        } else {
            console.error('API 请求失败:', res.message);
        }
    }).catch(error => {
        console.error('API 请求出错:', error);
    });
}

// 监听 value1 和 value2 的变化并触发 handleChange
// 如果时间发生变化更新饼图数据
watch([value1, value2], ([newValue1, newValue2]) => {
    if (newValue1) {
        handleChange(newValue1);
    }
    if (newValue2) {
        handleChange(newValue2);
    }
}, { immediate: true });

// 定义 左侧柱状图的dom元素
const leftBarRef = ref(null);
// 初始化柱状图
let myChart = null || '';
// 挂载时初始化柱状图和饼图
onMounted(() => {
    const chartDom = leftBarRef.value; // 柱状图的dom元素
    // 初始化柱状图
    if (chartDom) {
        myChart = echarts.init(chartDom);
        const option = {
            color: ['#70A2FC', '#68BBC4'],
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    { product: '学院名称1', 2015: 43.3, 2016: 85.8, },
                    { product: '学院名称2', 2015: 83.1, 2016: 73.4, },
                    { product: '学院名称3', 2015: 86.4, 2016: 65.2, },
                    { product: '学院名称4', 2015: 72.4, 2016: 53.9, }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {
                type: 'value',
                max: 250
            },
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        option && myChart.setOption(option);
    } else {
        console.error('Left Bar DOM element not found');
    }
});

// 表格上面的选择输入框用到的
const SelectVal1 = ref(''); // 左侧第一个月份
const SelectVal2 = ref(''); // 右侧第二个月份
const SelectVal3 = ref('请选择学院'); // 学院
const SelectVal4 = ref('请选择学历'); // 学历
// 月份的选项
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
];
// 学院信息的选项
const schoolInfo = ref([
    {
        value: '河北科技大学',
        id: '101'
    },
    {
        value: '河北科技大学2',
        id: '102'
    },
    {
        value: '河北科技大学3',
        id: '103'
    },
]);
// 学历信息
const XliInfo = ref([
    {
        value: '本科',
        id: '101'
    },
    {
        value: '研究生',
        id: '102'
    },
    {
        value: '本科',
        id: '103'
    }
]);

// 底部表格的初始化数据 请求的报错
const tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        information: 20
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        information: 20
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        information: 20
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        information: 20
    },
]);
</script>

<style lang="scss" scoped>
.container {
    padding: 35px;

    .title {
        margin-bottom: 30px;
        width: 70px;
    }

    // 顶部三个数据
    .top {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 50px;

        .information,
        .visit,
        .duration {
            width: 232px;
            height: 140px;
            border: 2px solid #dfe6e9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            font-size: 16px;
            margin-right: 35px;
            border-radius: 4px;

            p {
                margin-right: 145px;
            }

            .total {
                font-size: 12px;
            }
        }
    }

    // 中间的两个图形
    .middle {
        display: flex;

        // 头部的标题和时间选择器
        header {
            display: flex;
            align-items: baseline;

            .demo-date-picker {
                display: flex;
                width: 350px;
                padding: 0;
                margin-left: 247px;
                flex-wrap: wrap;

                .block {
                    text-align: left !important;
                }
            }

            .demo-date-picker .block {
                padding: 30px 0;
                text-align: center;
                border-right: solid 1px var(--el-border-color);
                flex: 1;
            }

            .demo-date-picker .block:last-child {
                border-right: none;
            }

            .demo-date-picker .demonstration {
                display: block;
                color: var(--el-text-color-secondary);
                font-size: 14px;
                margin-bottom: 20px;
            }
        }

        .charts-container {
            display: flex; // 使用 Flexbox 布局
            justify-content: space-between; // 在主轴上均匀分布
            margin-top: 20px; // 添加一些顶部间距
        }

        .left-bar,
        .right-pie {
            width: 600px;
            height: 360px;
        }

        .left,
        .right {
            width: 50%;
        }
    }

    // 底部的图表
    .bottom {
        margin-top: 20px;
    }
}
</style>
